<template>
  <view>
    deviceinfo
  </view>
  <view>
    <button type="primary" @click="getStorageInfoSync">getStorageInfoSync</button>
    <button type="primary" @click="getDeviceInfo">getDeviceInfo</button>
    <button type="primary" @click="clearStorageSync">clearStorageSync</button>
    <button type="primary" @click="setCurrentTime">setCurrentTime</button>
    <button type="primary" @click="showTime">getTime</button>
    
  </view>
  <view class="container">
    <view v-for="key in keys" :key="key" style="border-bottom: 1px solid red;">
      <view>{{key}}</view>
      <view style="margin-left: 20px;">{{deviceInfo[key]}}</view>
    </view>
  </view>
</template>
<script lang="ts" setup>
  import { onLoad, onReady } from "@dcloudio/uni-app"
  import { ref } from "vue"
  
  const keys = ref([])
  const deviceInfo = ref({})
  
  function getDeviceInfo() {
    deviceInfo.value = uni.getDeviceInfo()
    keys.value = Object.keys(deviceInfo.value)
    console.log('device info\n', deviceInfo.value);
    console.log(deviceInfo.value.deviceId);
  }
  
  function getStorageInfoSync() {
    try{
      let info = uni.getStorageInfoSync()
      console.log('getStorageInfoSync');
      console.log(info);
    }catch(e){
      console.log(e);
    }
  }
  
  function clearStorageSync() {
    try{
      uni.clearStorageSync()
    }catch(e){
      console.log('clearStorageSync err', e);
    }
  }
  
  function setCurrentTime() {
    uni.setStorageSync('current-time', Date.now())
  }
  
  function showTime() {
    let time = uni.getStorageSync('current-time')
    console.log('time', time);
  }
  
</script>
<style scoped>
  .container {
    padding: 5px;
    border: 1px solid red;
  }
</style>